<template>
  <Teleport to="body">
    <div class="drawer" :class="{ 'drawer-end': direction === 'right' }">
      <input type="checkbox" class="drawer-toggle" :checked="modelValue" />
      <div class="drawer-side z-50">
        <div
          aria-label="close sidebar"
          class="drawer-overlay"
          @click="$emit('update:modelValue', false)"
        />
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
export type DrawerPopDirection = "left" | "right";

interface Props {
  modelValue: boolean;
  direction?: DrawerPopDirection;
}
withDefaults(defineProps<Props>(), {
  direction: "left",
});

defineEmits<{
  "update:modelValue": [value: boolean];
}>();
</script>
